<template>
  <div class="com_box flexbox flexcolumn  height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
    <div class="warn_head flexbox flexcenter flexbetween">
        <div class="warn_title">计划监控提醒</div>
        <div class="flexbox flexcenter">
            <div class="warn_btn font_14 cancel flexbox flexcenter flexjust" style="margin-right:12px" @click="deldialogVisible = true">取消</div>
            <div class="warn_btn font_14 save flexbox flexcenter flexjust" @click="EditSave">保存设置</div>
        </div>
    </div>
    <div class="flexbox height_100" >
        <div class="model_content">
            <div class="flexbox mb-20">
                <div class="model_icon flexbox flexcolumn flexcenter">
                    <img src="@/assets/img/monitor_1.svg" alt="">
                    <div class="line"></div>
                </div>
                <div class="card_info" :class="step_current == 1 ? 'active_card' : ''" @click="select_step(1)" >
                    <div class="card_info_title flexbox flexcenter flexbetween">
                        <span class="font_14 font_weight_500" style="color:#191B1E;">基础信息</span>
                        <!-- <div class="font_12 card_status_pend" v-if="!step_status.WarnStepA">待设置</div>
                        <div class="font_12 card_status_success" v-else>设置完成</div> -->
                    </div>
                    <div class="flexbox flexcolumn">
                        <div class="card_info_item flexbox" style="margin-bottom:12px">
                            <div class="card_info_item_label font_14 ">策略名称</div>
                            <div class="card_info_item_value font_14 container" style="width: 168px;">{{qc_delivery_monitoring_name || '--'}}</div>
                        </div>
                         <div class="card_info_item flexbox">
                            <div class="card_info_item_label font_14">监控账户</div>
                            <div class="card_info_item_value font_14">{{advertiser_list_Num}}个</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flexbox mb-20">
                <div class="model_icon flexbox flexcolumn flexcenter">
                    <img src="@/assets/img/monitor_2.svg" alt="">
                    <div class="line"></div>
                </div>
                <div class="card_info" :class="step_current == 2 ? 'active_card' : ''" :style="step_status.WarnStepA ? '' : 'opacity:0.5'" @click="select_step(2)">
                    <div class="card_info_title flexbox flexcenter flexbetween">
                        <span class="font_14 font_weight_500" style="color:#191B1E;">监控预警</span>
                        <!-- <div class="font_12 card_status_pend" v-if="!step_status.WarnStepB">待设置</div>
                        <div class="font_12 card_status_success" v-else>设置完成</div> -->
                    </div>
                    <div class="flexbox flexcolumn">
                        <div class="card_info_item flexbox" style="margin-bottom:12px">
                            <div class="card_info_item_label font_14 ">固定条件</div>
                            <div class="card_info_item_value font_14 container" style="width: 168px;">计划总消耗范围
                                {{formLabelrange.qc_delivery_monitoring_cost_left}}-{{formLabelrange.qc_delivery_monitoring_cost_right}}，
                                {{formLabelrange.qc_delivery_monitoring_roi_type=='0'?'直接 roi范围':'七日 roi范围'}}
                                {{formLabelrange.qc_delivery_monitoring_roi_left}}-{{formLabelrange.qc_delivery_monitoring_roi_right}}</div>
                        </div>
                         <div class="card_info_item flexbox">
                            <div class="card_info_item_label font_14">监控提醒</div>
                            <div class="card_info_item_value font_14">{{remind.length>0?remind.length +' 个提醒规则':'--'}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flexbox flexcenter ">
               <div class="flexbox flexjust">
                    <img src="@/assets/img/monitor_3.svg" alt="">
                </div>
                <div @click="select_step(3)" class="card_info  font_14 font_weight_500" :style="step_status.WarnStepB ? '' : 'opacity:0.5'" :class="step_current == 3 ? 'active_card' : ''" style="color:#191B1E;padding:8px 20px">结束</div>
            </div>
        </div>
            <WarnStepA  ref="WarnStepA" @Card_NextStep="next_step" v-show="step_current == 1"/>
            <WarnStepB  ref="WarnStepB" @Card_NextStep="next_step" v-show="step_current == 2"/>
            <WarnStepC  ref="WarnStepC" @complete="submitForm" @preview="previewForm" v-if="step_current == 3"/>
    </div>
     <PreviewDialog ref="PreviewDialog" :showData="previewData"  v-if="displayDialog"/>
     <SumbitDialog 
        class="deldialog"
        width="400px"
        :dialogVisible.sync="deldialogVisible"
        sumbitColor="#F53F3F"
        sumbitText="确定"
        @onSubmit="del_FJ">
        <svg slot="title" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.4136 4.86706C15.3549 3.04431 12.6451 3.04431 11.5864 4.86706L3.85967 18.17C2.82129 19.9577 4.15529 22.1667 6.27331 22.1667H21.7267C23.8447 22.1667 25.1787 19.9577 24.1403 18.17L16.4136 4.86706ZM14 8.16667C13.4201 8.16667 12.95 8.63096 12.95 9.2037V15.4259C12.95 15.9987 13.4201 16.463 14 16.463C14.5799 16.463 15.05 15.9987 15.05 15.4259V9.2037C15.05 8.63096 14.5799 8.16667 14 8.16667ZM14 17.5C13.4201 17.5 12.95 17.9643 12.95 18.537C12.95 19.1098 13.4201 19.5741 14 19.5741C14.5799 19.5741 15.05 19.1098 15.05 18.537C15.05 17.9643 14.5799 17.5 14 17.5Z" fill="#F53F3F"/>
        </svg>
        <div class="dioalog_text">确认要取消？，取消后将不会保存当前设置！</div>
    </SumbitDialog>
  </div>
</template>

<script>
import WarnStepA from "@/components/delivery/components/WarnstepA";
import WarnStepB from "@/components/delivery/components/WarnstepB";
import WarnStepC from "@/components/delivery/components/WarnstepC";
import PreviewDialog from '@/components/delivery/components/PreviewDialog.vue';
import SumbitDialog from "@/components/components/SumbitDialog"
export default {
  data() {
    return {
        formLabelrange:{
            qc_delivery_monitoring_cost_left:0,
            qc_delivery_monitoring_cost_right:0,
            qc_delivery_monitoring_time_left:0,
            qc_delivery_monitoring_time_right:0
        },
        advertiser_list_Num:0,
        qc_delivery_monitoring_name:"--",
        remind:[],
        displayDialog:false,
        deldialogVisible:false,
        loading:false,
        step_current:1,
        step_status:{
            'WarnStepA':false,
            'WarnStepB':false,
            'WarnStepC':false,
        },
        step_data:{
            'WarnStepA':null,
            'WarnStepB':null,
            'WarnStepC':null
        },
        previewData:undefined
    };
  },
  components: {
    WarnStepA,
    WarnStepB,
    WarnStepC,
    PreviewDialog,
    SumbitDialog
  },
  created() {
    localStorage.setItem('complete', false)
    if(this.$route.query.template_id){
        this.EchoFn(this.$route.query.template_id)
    }
  },
//   mounted() {
//     window.addEventListener('beforeunload', function (e) {  
//         // 浏览器兼容性写法  
//         var confirmationMessage = '你确定要离开吗？';  
//         (e || window.event).returnValue = confirmationMessage; // 兼容IE  
//         return confirmationMessage; // 兼容其他浏览器  
//     });
//   },
  methods: {
    EchoFn(id){
         this.$http.post("autodrop/Monitoring/templateFind",{qc_delivery_monitoring_id:id}).then(res => {
            let data = res.data.data;
            this.step_status.WarnStepA = true;
            this.step_status.WarnStepB = true;
            this.step_status.WarnStepC = true;

            this.$refs.WarnStepA.tableData = data.advertiser_list.map(item => {
                return{
                    'advertiser_id': item.qc_delivery_monitoring_advertiserid,
                    'checkboxGroup': item.qc_delivery_monitoring_marketing_goal_type == '2'?['0','1']:[item.qc_delivery_monitoring_marketing_goal_type+''],
                    'name': item.name,
                    'userid': item.qc_delivery_monitoring_userid.map(e => e.id)
                }
            });
            this.$refs.WarnStepA.strategyName = data.qc_delivery_monitoring_name;
            this.$refs.WarnStepA.qc_delivery_monitoring_feishu_url = data.qc_delivery_monitoring_feishu_url;

            this.$refs.WarnStepB.formLabelrange.qc_delivery_monitoring_cost_left = data.qc_delivery_monitoring_cost_left;
            this.$refs.WarnStepB.formLabelrange.qc_delivery_monitoring_cost_right = data.qc_delivery_monitoring_cost_right;
            this.$refs.WarnStepB.formLabelrange.qc_delivery_monitoring_roi_left = data.qc_delivery_monitoring_roi_left;
            this.$refs.WarnStepB.formLabelrange.qc_delivery_monitoring_roi_right = data.qc_delivery_monitoring_roi_right;
            this.$refs.WarnStepB.formLabelrange.qc_delivery_monitoring_roi_type = data.qc_delivery_monitoring_roi_type+'';
            if(data.alerts_list.length > 0){
                data.alerts_list.forEach(e => {
                    if(e.monitoring_type == 1){
                        this.$refs.WarnStepB.cardAlerts_1.cost = e.cost;
                        this.$refs.WarnStepB.card_1 = true;
                    }else if(e.monitoring_type == 2){
                        this.$refs.WarnStepB.cardAlerts_2.cost = e.cost;
                        this.$refs.WarnStepB.cardAlerts_3.segmentation = e.segmentation+'';
                        this.$refs.WarnStepB.card_2 = true;
                    }else{
                        this.$refs.WarnStepB.cardAlerts_3.cost = e.cost;
                        this.$refs.WarnStepB.cardAlerts_3.segmentation = e.segmentation+'';
                        this.$refs.WarnStepB.card_3 = true;
                    }
                })
            }

            this.step_data.WarnStepA = {
                'qc_delivery_monitoring_name':data.qc_delivery_monitoring_name,
                'advertiser_list':data.advertiser_list
            }
            console.log(this.step_data.WarnStepA,'***********')
            this.step_data.WarnStepB = {
                    'qc_delivery_monitoring_cost_left':data.qc_delivery_monitoring_cost_left,
                    'qc_delivery_monitoring_cost_right':data.qc_delivery_monitoring_cost_right,
                    'qc_delivery_monitoring_roi_type':data.qc_delivery_monitoring_roi_type,
                    'qc_delivery_monitoring_roi_left':data.qc_delivery_monitoring_roi_left,
                    'qc_delivery_monitoring_roi_right':data.qc_delivery_monitoring_roi_right,
                    'alerts_list':data.alerts_list
            };
            console.log(data)
         })
    },
    EditSave(){
       let a = this.$refs.WarnStepA.nextStep();
       if(!a)return;
       let b = this.$refs.WarnStepB.nextStep();
       b.then(e=>{
        if(!e)return;
        this.submitForm()
       })
    },
    next_step(componentName, val, step, data,validatecheck) {
        console.log(componentName, val, step,this.step_status[componentName],data)
        this.step_status[componentName] = val;
        this.step_data[componentName] = data;
        if(!validatecheck){
            this.step_current = step;
        }
    },
    select_step(num){
        if(this.step_current == num)return;
        if(num == 1){
          return this.step_current = num;
        }
        if([2].includes(num)){
          return this.$refs.WarnStepA.nextStep();
        }
        if(num == 3){
            let a = this.$refs.WarnStepA.nextStep();
            if(!a)return;
            let b = this.$refs.WarnStepB.nextStep();
            b.then(e=>{
                if(!e)return;
               this.step_current = num
            })
        }
    },
    del_FJ(){
        this.$router.push({path:"/WarnReminde"})
        console.log()
    },
    previewForm(){
        let  queryInfo = this.step_data;
        console.log(queryInfo)
        let  copyArr = JSON.parse(JSON.stringify(queryInfo.WarnStepA.advertiser_list))
        if(queryInfo.WarnStepA.advertiser_list.length > 0){
            copyArr.forEach(item => {
                item.qc_delivery_monitoring_marketing_goal_type = item.qc_delivery_monitoring_marketing_goal_type == '2'?['0','1']:[item.qc_delivery_monitoring_marketing_goal_type+''];
                if(this.$route.query.template_id && item.qc_delivery_monitoring_userid[0].nickname){
                    item.qc_delivery_monitoring_userid = item.qc_delivery_monitoring_userid.map(e=>e.id);
                }
            })
        }
        let data = {
            'qc_delivery_monitoring_feishu_url': queryInfo.WarnStepA.qc_delivery_monitoring_feishu_url,
            'qc_delivery_monitoring_name': queryInfo.WarnStepA.qc_delivery_monitoring_name,
            'qc_delivery_monitoring_cost_left': queryInfo.WarnStepB.qc_delivery_monitoring_cost_left,
            'qc_delivery_monitoring_cost_right': queryInfo.WarnStepB.qc_delivery_monitoring_cost_right,
            'qc_delivery_monitoring_roi_type': queryInfo.WarnStepB.qc_delivery_monitoring_roi_type,
            'qc_delivery_monitoring_roi_left': queryInfo.WarnStepB.qc_delivery_monitoring_roi_left,
            'qc_delivery_monitoring_roi_right': queryInfo.WarnStepB.qc_delivery_monitoring_roi_right,
            'advertiser_list':copyArr,
            'alerts_list': queryInfo.WarnStepB.alerts_list,
        }
        this.previewData = data;
        this.displayDialog = true;
        this.$nextTick(() => {
            this.$refs.PreviewDialog.dialogVisible = true;
            console.log(this.previewData,this.$refs.PreviewDialog)
        })
    },
    submitForm(){
        console.log(this.step_data)
        let  queryInfo = this.step_data;
        let data = {
            'qc_delivery_monitoring_name': queryInfo.WarnStepA.qc_delivery_monitoring_name,
            'qc_delivery_monitoring_feishu_url': queryInfo.WarnStepA.qc_delivery_monitoring_feishu_url,
            'qc_delivery_monitoring_cost_left': queryInfo.WarnStepB.qc_delivery_monitoring_cost_left,
            'qc_delivery_monitoring_cost_right': queryInfo.WarnStepB.qc_delivery_monitoring_cost_right,
            'qc_delivery_monitoring_roi_type': queryInfo.WarnStepB.qc_delivery_monitoring_roi_type,
            'qc_delivery_monitoring_roi_left': queryInfo.WarnStepB.qc_delivery_monitoring_roi_left,
            'qc_delivery_monitoring_roi_right': queryInfo.WarnStepB.qc_delivery_monitoring_roi_right,
            'advertiser_list':queryInfo.WarnStepA.advertiser_list,
            'alerts_list': queryInfo.WarnStepB.alerts_list,
        }
        this.loading = true;
        if(this.$route.query.template_id){
            this.$http.post("autodrop/Monitoring/templateEdit",{...data,qc_delivery_monitoring_id:this.$route.query.template_id}).then(res => {
                console.log(res)
                   if(res.data.code != 200){
                        this.$message.error(res.data.msg);
                   }else{
                       this.$message.success(res.data.msg);
                       this.$router.push({path:"/WarnReminde"})
                   }
                this.loading = false;
            })
        }else{
            this.$http.post("autodrop/Monitoring/templateAdd",data).then(res => {
                console.log(res)
                   if(res.data.code != 200){
                        this.$message.error(res.data.msg);
                   }else{
                       this.$message.success(res.data.msg);
                       this.$router.push({path:"/WarnReminde"})
                   }
                this.loading = false;
            })
        }
    }
  }
};
</script>

<style scoped>
.mb-20{
    margin-bottom: 20px;
}
.warn_head{
    border-bottom: 1px solid #E8EAEC;
    padding: 16px 20px;
}
.cancel{
    border-radius: 8px;
    border: 1px solid #E8EAEC;
    background: #FBFBFC;
    color: #5C636C;
}
.save{
    border-radius: 8px;
    border: 1px solid #165DFF;
    background: #165DFF;
    color: #FFFFFF;
}
.warn_btn{
    cursor: pointer;
    width: 98px;
    height: 34px;
}
.warn_title{
    color: #191B1E;
    font-size: 18px;
}
.model_content{
    flex-shrink: 0;
    padding: 20px;
    width: 360px;
    border-right: 1px solid #E8EAEC;
}
.card_info{
    margin-left: 20px;
    cursor: pointer;
    width: 100%;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E8EAEC;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.card_info_title{
    margin-bottom: 20px;
}
.card_status_pend{
    color:#5C636C;
    padding:4px 8px;
    background:#E8EAEC;
    border-radius:6px;
}
.card_status_success{
    background: #DDF2E2;
    color: #42B85E;
    padding:4px 8px;
    border-radius:6px;
}

.card_info_item_label{
    width: 80px;
    color: #5C636C;
}
.card_info_item_value{
    color: #191B1E;
}
.line{
    margin-top: 12px;
    background: #E8EAEC;
    width: 1px;
    height: 100%;
}

.active_card{
    border-color: #165DFF;
    background: #F5F7FF;
}
.dioalog_text{
    margin: 20px 0;
}
.container {  
  display: -webkit-box;  
  -webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */  
  -webkit-box-orient: vertical;  
  overflow: hidden;  
}
</style>